<template>
  <div class="app-container custom">

    <!-- 安灯汇总 -->
    <div class="table">
      <el-row :gutter="10" class="table_all">
        <span class="table_title">※ 进度汇总</span>
        <div>
          <el-button type="primary">{{ countdown }} s</el-button>
          <el-button icon="Document" type="success" plain @click="open = true">功能说明</el-button>
          <el-button
                   type="warning"
                   plain
                   icon="Sort"
                   @click="isShow = !isShow"
                >展开/折叠</el-button>
        </div>
      </el-row>
      <t-ag-grid
        :style="{height}"
        style="margin-bottom: 10px;"
        :column-defs="column"
        :row-data="tableData"
        :row-buffer="20"
        align="center"
        :defaultColDef = "{
          suppressMenu:true
        }"
        header-align="center"
      />

      <!-- MBB -->
      <t-ag-grid
        v-show="isShow"
        style="margin-bottom: 10px; height: 163px;"
        :column-defs="mbbColumn"
        :row-data="mbbTableData"
        :row-buffer="20"
        align="center"
        :defaultColDef = "{
          suppressMenu:true,
          sortable: false
        }"
        header-align="center"
        @cell-clicked="onMbbCellClicked"
      />

      <!-- 叠瓦焊机 -->
      <t-ag-grid
        v-show="isShow"
        style="margin-bottom: 10px; height: 163px; width: 84.3%;"
        :column-defs="dewaColumn"
        :row-data="dewaTableData"
        :row-buffer="20"
        align="center"
        :defaultColDef = "{
          suppressMenu:true,
          sortable: false
        }"
        header-align="center"
        @cell-clicked="onDiewaCellClicked"
      />
    </div>

    <div style=" width: 100%;height: 28px; margin-bottom: 6px; margin-top: -2px;">
      <img src="@/assets/images/legend.jpg" style="display: block; width: 100%; height: 28px;" />
    </div>

    <div style="display: flex; align-items: center; justify-content: space-around;">

      <!-- 叠瓦 设备位置 -->
      <div style="overflow: hidden; width: 50%; ">
        <span class="table_title">※叠瓦焊机</span>
        <template v-for="(item, index) in dieWaData" :key="index">
          <div style="width: 100%; ">
            <el-row :gutter="8">
              <template v-for="childrenVal in item">
                <el-col :span="4">
                  <el-tooltip
                    :content="getContent(childrenVal)"
                    raw-content
                    placement="right"
                    :enterable="false"
                    transition=""
                    :hide-after="0"
                    effect="light"
                    :open-delay="20"
                    popper-class="share_atooltip"
                    >
                    <div class="grid-content"
                      :class="childrenVal.productFlicker === '1' ? 'flicker'/* 闪烁 */ : 'normal'"
                      :style="`border: 5px solid ${childrenVal.statusColor}; background: ${childrenVal.productColor ? childrenVal.productColor : '#fff'}`"
                      @click="routerJump(childrenVal)">
                    <!-- <div class="grid-content" :class="childrenVal.productFlicker === '1' ? 'flicker'/* 闪烁 */ : 'normal'" :style="`border: 6px solid ${childrenVal.statusColor}`" @click="routerJump(childrenVal)"> -->
                      <p>{{ childrenVal.eqpId }}</p>
                      <p>{{ childrenVal.productId ? childrenVal.productId : '--' }}</p>
                      <p>{{childrenVal.keepTime}}</p>
                      <p>{{childrenVal.productPercentage}}%</p>
                    </div>
                  </el-tooltip>
                </el-col>
              </template>
            </el-row>
          </div>
        </template>

      </div>

      <!-- MBB 设备位置 -->
      <div style="overflow: hidden; width: 50%;">
        <span class="table_title">※MBB</span>
        <template v-for="(item, index) in mbbData" :key="index">
          <div style="width: 100%;">
            <el-row :gutter="8">
              <template v-for="childrenVal in item">
                <el-col :span="4">
                  <el-tooltip
                    :content="getContent(childrenVal)"
                    raw-content
                    placement="right"
                    :enterable="false"
                    transition=""
                    :hide-after="0"
                    effect="light"
                    :open-delay="20"
                    popper-class="share_atooltip"
                    >
                    <div class="grid-content"
                      :class="childrenVal.productFlicker === '1' ? 'flicker'/* 闪烁 */ : 'normal'"
                      :style="`border: 5px solid ${childrenVal.statusColor}; background: ${childrenVal.productColor ? childrenVal.productColor : '#fff'}`"
                      @click="routerJump(childrenVal)">
                    <!-- <div class="grid-content" :class="childrenVal.productFlicker === '1' ? 'flicker'/* 闪烁 */ : 'normal'" :style="`border: 6px solid ${childrenVal.statusColor}`" @click="routerJump(childrenVal)"> -->
                      <p>{{ childrenVal.eqpId }}</p>
                      <p>{{ childrenVal.productId ? childrenVal.productId : '--' }}</p>
                      <p>{{childrenVal.keepTime}}</p>
                      <p>{{childrenVal.productPercentage}}%</p>
                    </div>
                  </el-tooltip>
                </el-col>
              </template>
            </el-row>
          </div>
        </template>

      </div>
    </div>

    <!-- 功能说明 dialog  -->
    <el-dialog v-model="open" width="690px" title="※ 功能说明" append-to-body>
      <p>1、每个功能块以主线为基本展示对象，每个方块代表一条主线</p>
      <p>2、每个主线方块信息依次包括：</p>
      <p style="text-indent: 1em;">设备名称、瞬时节拍参考、当前生产状态及持续时长、生产进度及预警、EPT甘特图超链接</p>
      <p>3、方块的<span style="color: blue; font-weight: 700;">边框颜色</span>代表不同的设备生产状态(参考EPT状态图例)，其中**分代表当前状态持续时长</p>
      <p>4、方块的<span style="color: blue; font-weight: 700;">填充颜色</span>代表设备生产进度预警区间，根据生产进度达成百分比显示<span style="font-weight: 700;">不同颜色：</span></p>
      <p style="text-indent: 1em;">- 警告状态: 生产进度低于80%，填充色为<span style="color: red; font-weight: 700;">红色</span>，自动闪烁</p>
      <p style="text-indent: 1em;">- 预警状态: 生产进度低于90%，填充色为<span style="color: red; font-weight: 700;">红色</span>，不闪烁</p>
      <p style="text-indent: 1em;">- 正常状态: 生产进度个于90%和100之%间，填充色为<span style="font-weight: 700;">无色</span></p>
      <p style="text-indent: 1em;">- 超产状态: 生产进度大于100%，填充色为<span style="color: #00ff00; font-weight: 700;">浅绿色</span></p>
      <p>5、生产进度定义逻辑参考设备目标注册情报: </p>
      <p style="text-indent: 1em;">- MBB线：OEE目标 {{_target[1].oeeTarget}}%，理论目标{{_target[1].plantarget}}片/时(对应基准节拍 {{_target[1].targetTT}}秒)，生产进度目标{{_target[1].actualTarget}}片/时</p>
      <p style="text-indent: 1em;">- 叠瓦线：OEE目标 {{_target[0].oeeTarget}}%，理论目标{{_target[0].plantarget}}片/时(对应基准节拍 {{_target[0].targetTT}}秒)，生产进度目标{{_target[0].actualTarget}}片/时</p>
      <p>6、每小时内的半点时间开始10分钟内，设备端EAP通信延迟存在，状态和生产数据更新有延迟现象</p>

    </el-dialog>
  </div>
</template>

<script setup>
  import moment from 'moment'
  import { getAndengData, column, getTables, mbbColumn, dewaColumn, getMbbPosition, getDieWaPosition, getParmas } from './config'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const open = ref(false)
  const tableData = ref([])
  const mbbTableData = ref([])
  const dewaTableData = ref([])
  const height = ref('131px')
  const isShow = ref(true)
  const _target = ref([])

  const contentData = ref()
  const countdown = ref(180)
  const openCountdown = ref(false)
  let timer = null

  const mbbData = ref([])
  const dieWaData = ref([])

  const getList = () => {
    getAndengData().then((res) => {
      if(!openCountdown.value){
        openCountdown.value = true
      }
      const { oeeMonitorAndonSummaryList, oeeMonitorAndonList } = res.rows[0]
      tableData.value = oeeMonitorAndonSummaryList
      contentData.value = oeeMonitorAndonList

      mbbTableData.value = getTables(oeeMonitorAndonList, 'MBB')
      dewaTableData.value = getTables(oeeMonitorAndonList, '叠瓦')

      JSON.parse(JSON.stringify(oeeMonitorAndonList)).forEach(item => {
        if(item.eqpType === "MBB"){
          mbbData.value = getMbbPosition(item.oeeMonitorAndonSituationList)
        }
        if(item.eqpType === "叠瓦"){
          dieWaData.value = getDieWaPosition(item.oeeMonitorAndonSituationList)
        }
      })
    })
  }

  const getContent = (item) => {
    return `
      <p>设备ID: ${item.eqpId}</p>
      <p>设备状态: ${item.status}</p>
      <p>R Code描述: ${item.description}(${item.rcode})</p>
      <p>开始时间: ${item.createTime}</p>
      <p>结束时间: ${item.endTime}</p>
      <p>持续时长: ${item.keepTime}</p>
      <p>读报警时间: ${item.alarmReadTime === null ? '--' : item.alarmReadTime}</p>
      <p>报警文本: ${item.alarmText}</p>
      <p>报警ID: ${item.alarmId}</p>
      <p>源报警ID: ${item.errorSource}</p>
      <p>源报警设备类型: ${item.sourceMachineType}</p>
    `
  }

  const routerJump = (target) => {
    router.push({
      path: '/timeAnalysis/history',
      state: {
        dataTime: moment().format('YYYY-MM-DD 08:00:00'),
        machineTypeId: target.eqpId
      }
    })
  }

  const onMbbCellClicked = ({ colDef, data }) => {
    if(colDef.headerName === '全天' && data.classes === '进度差异'){
      router.push({
        path: '/PRDMonitor/beforeLayer/MBB',
        state: {
          selectedEpt: [`${colDef.field[0]}区`],
          dataTime: moment().format('YYYY-MM-DD')
        }
      })
    }
  }

  const onDiewaCellClicked = ({ colDef, data }) => {
    if(colDef.headerName === '全天' && data.classes === '进度差异'){
      router.push({
        path: '/PRDMonitor/beforeLayer/imbricate',
        state: {
          selectedEpt: [`${colDef.field[0]}区`],
          dataTime: moment().format('YYYY-MM-DD')
        }
      })
    }
  }

  watch(() => openCountdown.value, (val, preVal) => {
    if(val){
      timer = setInterval(() => {
        countdown.value--
        if(countdown.value === 0 && location.pathname.includes('Andeng')){
          getList()
          countdown.value = 180
        } else if(countdown.value === 0) {
          countdown.value = 180
        }
      }, 1000)
    } else {
      window.clearInterval(timer)
    }
  })

  document.addEventListener('visibilitychange', () => {
    var isHidden = document.hidden
    if (isHidden) {
      window.clearInterval(timer)
    } else {
      if(openCountdown.value){
        openCountdown.value = false
        setTimeout(() => {
          getList()
          openCountdown.value = true
        }, 0)
      }
    }
  }, true)

  onUnmounted(() => {
    document.addEventListener('visibilitychange', () => {
      var isHidden = document.hidden
      if (isHidden) {
        window.clearInterval(timer)
      } else {
        if(openCountdown.value){
          openCountdown.value = false
          setTimeout(() => {
            openCountdown.value = true
          }, 0)
        }
      }
    }, true)
  })

  getList()
  getParmas().then((res) => {
    _target.value = res.rows
  })
</script>

<style scoped lang="less">

@keyframes blink{
  0%{
    background:red;
  }
  100%{
    background:#fff;
  }
}
.custom{
  overflow-y: scroll;
  .table {
    .table_all {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0px !important;
    }
    .table_title {
      color: blue;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .situation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f8f8;
    margin-bottom: 2px;
    color: #000;
  }

}

.table_title {
      color: blue;
      font-size: 18px;
      font-weight: 600;
    }

.el-col {
  border-radius: 4px;
  font-size: 12px;
}

.grid-content {
  border-radius: 4px;
  min-height: 80px;
  margin: 2px 0;
  border: 3px solid #000;
  box-sizing: border-box;
  text-align: center;
}

.grid-content:hover {
  cursor: pointer;
}

.flicker {
  animation: blink 6s linear infinite alternate;
}

.el-col-2 {
    max-width: 9%;
    flex: 0 0 20%;
  }

:deep(.custom-moving) {
  background-color: #fde9d9;
  }

  :deep(.custom-title){
    background: #b8cce4;
  }
</style>
